<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS标签元素类型介绍(Cascading Style Sheets HTML Element Type Introduce)</title>
  <!-- 
    CSS的HTML元素类型比较指的是在CSS样式表中选择不同HTML元素类型时，不同元素类型之间的样式优先级比较。以下是关于HTML元素类型比较的说明总结： 
 
      1. 具体性：某些HTML元素类型具有更具体的样式规则，如标题元素（h1-h6）通常具有更高的优先级。 
      2. 嵌套关系：嵌套关系也会影响样式的优先级，更深层级的元素可能会覆盖更浅层级元素的样式。 
      3. 继承性：一些HTML元素类型具有继承性，子元素可能会继承父元素的样式。 
      4. CSS选择器权重：如果使用了不同的CSS选择器来选择同一元素类型，根据选择器的权重来确定应用的样式。

      块级元素: h1~h6/p/div/ul/ol/li/table/tr/th/td/form/fieldset/legend/hr/pre/blockquote/address/figure/figcaption/table/caption/thead/tbody/tfoot/colgroup/col/dl/dt/dd/menu/details/summary/template/canvas/video/audio/source/track/embed/object/param/iframe/script/noscript/del/ins/s/u/b/i/mark/small/big/sub/sup/q/cite/abbr/data/
      行内级元素: span/a/img/strong/i
      行内块级元素: input/button/textarea/select

    块级元素/行内级元素
    块级元素: 独占一行
    行内级元素: 与其他元素在同一行显示
    继承性: 子元素会继承父元素的样式
    优先级: 选择器权重
    HTML考虑一个问题: 
      1.每个元素在页面当中到底占据多大的空间, 某些元素非常重要.
      2.独占一行 -> 类型: 块级元素(block level): h元素/p/div/span/a/img/strong/i
      3.某些元素属于内容的一部分: 没有必要独占一行, 其他内容在同一行显示 
   -->
</head>

<body>

  <div>div</div>
  <h3>h3</h3>
  <p>p</p>
  <span style="display: inline-block;">1111</span>
  <span>222</span>

</body>

</html>